<!--
 * @Author: your name
 * @Date: 2021-04-15 14:42:57
 * @LastEditTime: 2021-07-29 15:42:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\todoOrder\orderList.vue
-->
<template>
  <page-layout title="缴税人员信息">
    <div style="background: #fff;padding:24px">
      <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 20px">
        <a-form-model-item label="关键字">
          <a-input v-model="formState.keyword" style="width:242px" placeholder="请输入姓名/身份证号/手机号" allow-clear>
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="项目名称">
          <a-select show-search :filter-option="false" style="width: 160px" v-model="formState.projectId" placeholder="请输入项目名称" @search="onSearchProject" @change="onChangeProject" allow-clear>
            <a-select-option v-for="item in project" :key="item.projectId">{{ item.projectName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="缴纳实体">
          <a-select v-model="formState.payEntity" style="width: 160px" placeholder="请选择缴纳实体" allow-clear>
            <!-- <a-select-option :value="key" v-for="(value, key) in taskErrorType" :key="key">{{ value }}</a-select-option> -->
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="报送状态">
          <a-select v-model="formState.sendStatus" style="width: 160px" placeholder="请选择报送状态" allow-clear>
            <a-select-option :value="item.key" v-for="item in sendStatusTypeList" :key="item.key">{{ item.value }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="最近同步日期">
          <a-range-picker style="width:398px" :default-value="[formState.nowBeginMonth?moment(formState.nowBeginMonth, dateFormat):'', formState.nowEndMonth?moment(formState.nowEndMonth, dateFormat):'']" @change="(date, dateString)=>onChangeDate(date, dateString,0)" :placeholder="['开始日期','结束日期']">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item label="任职受雇从业日期">
          <a-range-picker style="width:398px" :default-value="[formState.workBeginMonth?moment(formState.workBeginMonth, dateFormat):'', formState.workEndMonth?moment(formState.workEndMonth, dateFormat):'']" @change="(date, dateString)=>onChangeDate(date, dateString,1)" :placeholder="['开始日期','结束日期']">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-model-item>
        <a-form-model-item>
          <a-space :size="8">
            <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
          </a-space>
        </a-form-model-item>
      </a-form-model>
      <a-table rowKey="id" :columns="columns" :data-source="dataSource" :scroll="{ x: true }" :pagination="{
                            current: formState.pageNum,
                            pageSize: formState.pageSize,
                            total: formState.total,
                            onChange: onPageChange,
                            onShowSizeChange: onSizeChange,
                        }" style="background: #fff">
        <a-badge slot="status" slot-scope="text" v-if="text" :color="text? 'green' : 'red'" :text="text?'在职':'离职'" />
        <a-badge slot="nowStatus" slot-scope="text" v-if="text" :color="text? 'green' : 'gold'" :text="text?'正常':'非正常'" />
        <a-badge slot="sendStatus" slot-scope="text" v-if="text" :color="text==1? 'gray':text==2? 'green': 'red'" :text="text==1?'待报送':text==2?'报送中':'报送异常'" />
        <template slot="operation" slot-scope="text,record">
          <a class="ant-dropdown-link" @click="onRecord(record)">同步记录</a>
        </template>
      </a-table>
      <infoRecord :visible="isVisible" @cancelModal="onCancelModal"></infoRecord>
    </div>
  </page-layout>
</template>

<script>
import infoRecord from './modal/infoRecord.vue'
import { getProjectSelectList } from '@/services/todo.js';
import PageLayout from '@/layouts/PageLayout';
import moment from 'moment';
import datas from '@/utils/data';
export default {
  name: 'taxPayerInfo',
  components: { PageLayout, infoRecord },
  data () {
    return {
      dateFormat: 'YYYY-MM',
      waitTypeList: ['不可申报', '待申报', '申报异常', '待缴纳', '缴纳异常', '待缴纳'],
      navType: 0,
      formState: {
        keyword: '', // 姓名/身份证/手机号
        projectId: undefined, // 项目ID
        payEntity: undefined, // 缴纳实体
        sendStatus: undefined,// 报送状态
        nowBeginMonth: "",
        nowEndMonth: "",
        workBeginMonth: "",
        workEndMonth: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      sendStatusTypeList: [
        {
          value: "已报送",
          key: "ybs"
        },
        {
          value: "非正常",
          key: "fzc"
        },
        {
          value: "报送异常",
          key: "bsyc"
        }
      ],
      project: [],
      columns: datas.taxPersonInfoColumns,
      dataSource: [{}, {}],
      selectedRowKeys: [],
      isVisible: false
    };
  },
  methods: {
    moment,
    getCurrentStyle (current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
    onSearchProject (value) {
      if (value.length >= 2) {
        this.getProjectSelectList({ projectName: value });
      }
    },
    onChangeProject (val) {
      this.formState.projectId = val;
    },
    onChangeDate (date, dateString, type) {
      if (type === 0) {
        this.formState.nowBeginMonth = dateString[0];
        this.formState.nowEndMonth = dateString[1];
      } else {
        this.formState.workBeginMonth = dateString[0];
        this.formState.workEndMonth = dateString[1];
      }
    },
    onRecord (item) {
      console.log(item);
      this.isVisible = true;
    },
    onCancelModal () {
      this.isVisible = false;
    },
    onChangeNavType (e) {
      console.log(e);
    },
    onReport (item) {
      console.log(item);
    },
    onPay (item) {
      console.log(item);
    },
    onSearch () {
      console.log(this.formState);
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.pageListState.pageNum = page;
      this.pageListState.pageSize = pageSize;
    },
    onSizeChange (current, size) {
      this.pageListState.pageNum = 1;
      this.pageListState.pageSize = size;
    },

    /**
     * @description: 项目下拉列表
     * @param {*}
     * @return {*}
     */
    getProjectSelectList (params) {
      getProjectSelectList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.project = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
  mounted () {

  },
};
</script>

<style lang="less" scoped>
.ant-col.ant-col-4 {
  width: 180px;
}
.ant-col.ant-col-20 {
  padding: 24px;
  flex: 1;
}
</style>
